<div class="module-content module-vertical">
    <div class="module-header">
        <div class="module-header-title">
            <nz-breadcrumb>
                <nz-breadcrumb-item>
                    产品列表
                </nz-breadcrumb-item>
            </nz-breadcrumb>
        </div>
    </div>
    <div class="module-body">
        <div class="panel panel-grid" style="padding: 10px; box-shadow: none;">
            <div class="panel-heading" style="display: grid; grid-template-columns: 1fr; margin-bottom: 10px;">
                <div class="search-container">
                
                    <nz-form-item style="margin-bottom: 10px;">
                        <nz-form-label [nzSpan]="2">产品大类</nz-form-label>
                        <nz-form-control [nzSpan]="22">
                            <nz-radio-group [(ngModel)]="option.catalog" nzButtonStyle="solid" (ngModelChange)="activeType1()">
                                <label nz-radio-button nzValue="all">全部</label>
                                <label nz-radio-button *ngFor="let t of option.catalogs" [nzValue]="t.code" >{{t.name}}</label>
                            </nz-radio-group>
                        </nz-form-control>
                    </nz-form-item>

                    <nz-form-item style="margin-bottom: 10px;" *ngIf="option.catalog !== 'all'">
                        <nz-form-label [nzSpan]="2">产品小类</nz-form-label>
                        <nz-form-control [nzSpan]="22">
                            <nz-radio-group [(ngModel)]="option.category" nzButtonStyle="solid" (ngModelChange)="activeType2()">
                                <label nz-radio-button nzValue="all">全部</label>
                                <label nz-radio-button *ngFor="let t of option.categories" [nzValue]="t.code" >{{t.name}}</label>
                            </nz-radio-group>
                        </nz-form-control>
                    </nz-form-item>
                    
                    <div class="operate">
                        <nz-input-group [nzSuffix]="suffixIconSearch">
                            <input type="text" nz-input placeholder="搜索" name="keyword" [(ngModel)]="option.keyword" (ngModelChange)="filter()"/>
                        </nz-input-group>
                        <ng-template #suffixIconSearch>
                            <i nz-icon nzType="search"></i>
                        </ng-template>
                        <button nz-button nzType="primary" nz-tooltip nzTitle="添加" (click)="productDlg.create()">
                            <i nz-icon nzType="plus-square"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="panel-body" style="min-width: 800px;">

                <nz-table #productTable [nzFrontPagination]="true" [nzData]="products" [nzShowPagination]="true">
                    <thead>
                    <tr style="font-weight: bold;">
                        <th style="width: 5%;padding: 8px">#</th>
                        <th style="width: 20%;">名称</th>
                        <th style="width: 10%;">编号</th>
                        <th style="width: 10%;">大类</th>
                        <th style="width: 10%;">小类</th>
                        <th style="width: 10%;">型号</th>
                        <th style="width: 10%;">货架号</th>
                        <th style="width: 5%;">库存</th>
                        <th style="width: 10%;">市场价</th>
                        <th style="width: 10%;text-align: center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let product of productTable.data; let i = index">
                        <td style="width: 5%;padding: 8px">{{ (productTable.nzPageIndex - 1) * productTable.nzPageSize + i + 1}}</td>
                        <td style="width: 20%; padding: 8px;">{{product.name}}</td>
                        <td style="width: 10%; padding: 8px;">{{product.code}}</td>
                        <td style="width: 10%; padding: 8px;">{{product.catalog.name}}</td>
                        <td style="width: 10%; padding: 8px;">{{product.category.name}}</td>
                        <td style="width: 10%; padding: 8px;">{{product.model}}</td>
                        <td style="width: 10%; padding: 8px;">{{product.shelf}}</td>
                        <td style="width: 5%; padding: 8px;">{{product.amount}}</td>
                        <td style="width: 10%; padding: 8px;">{{product.price}}</td>
                        <td style="width: 10%;text-align: center; padding: 8px;">
                            <div class="action">
                                <button nz-button nzType="primary" (click)="edit(product)" nz-tooltip nzTitle="详情">
                                    <i nz-icon nzType="edit"></i>
                                </button>
                                <button nz-button nzType="primary" nzDanger (click)="delete(product)" nz-tooltip nzTitle="删除">
                                    <i nz-icon nzType="delete"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </nz-table>
            
            </div>
        </div>
    </div>
</div>

<app-product-dialog #productDlg (onSubmit)="submit($event)"></app-product-dialog>
